<template>
	<view class="container">
		<view>
			<view class="list-body" v-for="(item, index) in list" :key="index" @click="jumpHandle_tab3(item)">
				<image class="box-item-image" :src="item.imgUrl" mode="aspectFill" />
				<view class="tip" v-if="item.orgName">{{ item.orgName | dataFormat }}</view>
				<view class="right">
					<view class="fontB right-title">{{ item.contentName }}</view>
					<view class="right-desc ellipsis2">{{ item.contentIntroduce }}</view>
				</view>
			</view>
		</view>
		<mix-load-more :status="loading"></mix-load-more>
	</view>
</template>

<script>
import http from '../../common/request.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import {getCommonShareInfo} from '@/common/utils.js'
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			loading: 0,
			list: []
		};
	},
	components: { mixLoadMore },
	onReachBottom() {
		//当划到最底部的时候触发事件
		if (this.loading != 2) {
			this.getData(); //到底之后会触发getData()函数;
		}
	},
	mounted() {
		this.getData();
	},
	filters: {
		dataFormat(msg) {
			if (msg) {
				return msg.slice(0, 2);
			}
		}
	},
	methods: {
		getData: function() {
			//数据到底,触发这个函数
			this.loading = 1;
			http('/api/sysContentInfo/biography/biographyList', {
				method: 'post',
				data: {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					contentSubject: 2
				}
			}).then(result => {
				const rows = result.data.records || [];
				this.list = this.list.concat(rows); //进行数据的累加
				if (rows.length === this.pageSize) {
					this.pageNum++; //页数的++
					this.loading = 0;
				} else {
					this.loading = 2;
				}
				this.loading = this.list.length === 0 ? 3 : this.loading;
			});
		},
		jumpHandle_tab3({contentId, originalFlag, contentUrl}) {
			if (originalFlag === 0) {
				this.toWebView(contentUrl)
			}else {
				uni.navigateTo({
				url: '../../home/returnStory/details?contentId=' + contentId,
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		},
		toWebView(url) {
			// #ifdef H5
			location.href = url;
			// #endif
			// #ifdef MP-WEIXIN
			uni.navigateTo({
				url: '../web_view?url=' + encodeURIComponent(url),
				animationType: 'pop-in',
				animationDuration: 200
			});
			// #endif
		}
	}
};
</script>

<style lang="less" scoped>
.container {
	background-color: #f7f7f7;
	color: #66645d;
	font-size: 26rpx;
	padding: 24rpx 40rpx;

	.list-body {
		display: flex;
		padding-bottom: 23rpx;
		margin-bottom: 23rpx;
		overflow: initial !important;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: -12rpx;
			right: -12rpx;
			bottom: 0;
			background-color: #e7e7e6;
			height: 2rpx;
			transform: scaleY(0.5);
		}

		&:last-child {
			&::after {
				height: 0;
			}
		}

		.box-item-image {
			width: 275rpx !important;
			height: 160rpx !important;
			margin-right: 20rpx;
			flex-shrink: 0;
			border-radius: 12rpx;
		}
		.tip {
			width: 64rpx;
			height: 30rpx;
			line-height: 30rpx;
			display: flex;
			// align-items: center;
			justify-content: center;
			color: #fff;
			background: #f39800;
			font-size: 20rpx;
			position: absolute;
			left: 0;
			top: 16rpx;
			padding-left: 0rpx !important;
		}
		.right {
			.right-title {
				font-weight: bold;
				color: #66645d;
				line-height: 42rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				font-size: 30rpx;
			}

			.right-desc {
				font-size: 26rpx;
				color: #8a8c8d;
				margin-top: 26rpx;
				line-height: 37rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				word-break: break-all;
			}
		}
	}
}
</style>
